<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/htmnav-demo.css">
    <style type="text/css">
        body {
            background: #fff;
        }
        
        .demo {
            padding: 2em 0;
        }
        
        a:hover,
        a:focus {
            text-decoration: none;
            outline: none;
        }
        
        #accordion .panel {
            border: none;
            border-radius: 0;
            box-shadow: none;
            margin: 0 0 10px;
            overflow: hidden;
            position: relative;
        }
        
        #accordion .panel-heading {
            padding: 0;
            border: none;
            border-radius: 0;
            margin-bottom: 10px;
            z-index: 1;
            position: relative;
        }
        
        #accordion .panel-heading:before,
        #accordion .panel-heading:after {
            content: "";
            width: 50%;
            height: 20%;
            box-shadow: 0 15px 5px rgba(0, 0, 0, 0.4);
            position: absolute;
            bottom: 15px;
            left: 10px;
            transform: rotate(-3deg);
            z-index: -1;
        }
        
        #accordion .panel-heading:after {
            left: auto;
            right: 10px;
            transform: rotate(3deg);
        }
        
        #accordion .panel-title a {
            display: block;
            padding: 15px 70px 15px 70px;
            margin: 0;
            background: #fff;
            font-size: 18px;
            font-weight: 700;
            letter-spacing: 1px;
            color: #d11149;
            border-radius: 0;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            position: relative;
        }
        
        #accordion .panel-title a:before,
        #accordion .panel-title a.collapsed:before {
            content: "\f106";
            font-family: fontawesome;
            width: 55px;
            height: 100%;
            text-align: center;
            line-height: 50px;
            border-left: 2px solid #D11149;
            position: absolute;
            top: 0;
            right: 0;
        }
        
        #accordion .panel-title a.collapsed:before {
            content: "\f107";
        }
        
        #accordion .panel-title a .icon {
            display: inline-block;
            width: 55px;
            height: 100%;
            border-right: 2px solid #d11149;
            font-size: 20px;
            color: rgba(0, 0, 0, 0.7);
            line-height: 50px;
            text-align: center;
            position: absolute;
            top: 0;
            left: 0;
        }
        
        #accordion .panel-body {
            padding: 10px 20px;
            margin: 0 0 20px;
            border-bottom: 3px solid #d11149;
            border-top: none;
            background: #fff;
            font-size: 15px;
            color: #333;
            line-height: 27px;
        }
    </style>
</head>

<body>
    <div class="demo">
        <div class="container">
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingOne">
                        <h4 class="panel-title">
                            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                <i class="icon fa fa-globe"></i> Section 1
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                        <div class="panel-body">
                            <section>
                                <form id="form">
                                    <input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" />
                                </form>
                            </section>
                            <section class="mylist">
                                <h2 onclick="save()">正在进行 <span id="todocount">0</span></h2>
                                <ol id="todolist" class="demo-box">
                                </ol>
                                <h2>已经完成 <span id="donecount">0</span></h2>
                                <ul id="donelist">
                                </ul>
                            </section>
                            blandit posuere tortor aliquam vitae. Curabitur molestie eros. </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>


    <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
    <script>
        window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')
    </script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

</html>